<template>
  <div class="cad">
    <!-- 工具栏 -->
    <div class="toolbar">
      <div class="tool-containner search-btn"></div>
      <div class="tool-containner delete-btn"></div>
      <div class="tool-containner save-btn"></div>
      <div class="tool-containner export-btn"></div>
    </div>
    <!-- cad区域 -->
    <div class="cad-contain">
      <img src="../lib/svgFiles/hysk.svg" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: "Cad",
  data() {
    return {};
  },
  mounted() {

  },
  methods:{
  }
};
</script>

<style lang="scss" scoped>
@import "../assets/style/main";

.cad {
  height: 100%;
  background-image: url("../assets/img/bg.jpg");
  background-size: 100% 100%;
  .toolbar {
    display: flex;
    margin: 0 auto;
    height: px2rem(150);
    width: px2rem(600);
    border: 1px solid #fff;
    border-radius: 5px;
    .tool-containner{
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      height: px2rem(100);
      width: px2rem(100);
      border: 1px solid #fff;
      border-radius: 5px;
      margin-top: px2rem(25);
      margin-left: px2rem(40);
    }
    .search-btn{
      background-image: url("../assets/img/searchBtn.png");
      background-size: 100% 100%;
    }
    .delete-btn{
      background-image: url("../assets/img/deleteBtn.png");
      background-size: 100% 100%;
    }
    .save-btn{
      background-image: url("../assets/img/saveBtn.png");
      background-size: 100% 100%;
    }
    .export-btn{
      background-image: url("../assets/img/exportBtn2.png");
      background-size: 100% 100%;
    }

  }
  .cad-contain {
    display: flex;
    height: px2rem(930);
    width: px2rem(700);
    border: 1px solid #fff;
    margin: 0 auto;
    border-radius: 5px;
    .mx-contain{
      height: px2rem(930);
      width: px2rem(700);
    }
  }
}
</style>
